<template>
  <div class="asetting_content cf w1 h1">
    <nav class="asetting_c-left fl">
      <Menu
        class="asetting-l-nav"
        style="width:100%;"
        @on-select="onChangeRoue"
        :active-name="activeName"
      >

        <MenuItem name="/temperature/device">
        <i class="fa fa-window-restore"></i>
        <span>设备管理</span>
        </MenuItem>

        <MenuItem name="/temperature/alarm">
        <i class="fa fa-bullhorn"></i>
        <span>报警事件</span>
        </MenuItem>

        <MenuItem name="/temperature/params">
        <i class="fa fa-newspaper-o"></i>
        <span>参数设置</span>
        </MenuItem>

      </Menu>
    </nav>
    <div class="asetting_c-right fr">
      <transition name="fade-transverse">
        <router-view />
      </transition>
    </div>
  </div>
</template>
<script>
export default {
  computed: {
    activeName() {
      const { path } = this.$route;
      if (path.startsWith("/temperature/device")) {
        return "/temperature/device";
      }
      if (path.startsWith("/temperature/alarm")) {
        return "/temperature/alarm";
      }
      if (path.startsWith("/temperature/params")) {
        return "/temperature/params";
      }
    }
  },

  methods: {
    onChangeRoue(path) {
      this.$router.push({ path });
    }
  }
};
</script>
